<template>
  <aside class="w1 tab-content">
    <Card title="周电流数据" :dis-hover="true" :bordered="false">
      <div slot="extra">
        <Button @click="handleOnOpen" type="primary" shape="circle" icon="ios-search">
        </Button>
      </div>
      <div class="card-body">
        <Drawer class="ivu-drawer-top" :title="companyInfo.name" width="300" v-model="visible" :mask="false">
          <SearchBar v-if="showSearch" :companyId="companyId" @change="handleChange" @download="handleDownload">
            <div slot="timeBar">
              <DatePicker :clearable="false" type="daterange" :options="timeOptions" class="time-picker" v-model="date" @on-change="handleTimeChange" placement="bottom-end" placeholder="请选择日期..." show-week-numbers></DatePicker>
            </div>
          </SearchBar>
        </Drawer>
        <Table border :columns="columns" :data="tableData" :loading="loading">
        </Table>
        <Page style="margin-top:16px;" :total="pageInfo.total" :page-size="20" @on-change="handlePageChange" :current="pageInfo.current" />
      </div>
    </Card>
  </aside>
</template>
<script>
import mixin from "./mixin"
import SearchBar from "../SearchBar"
import { getNxRealData, getCompanyDetailByCompanyId, exportNx } from "@/api"
import Download from "@/utils/download"
import utils from "@/utils/utils"

const { isBlankArray } = utils

export default {
  mixins: [mixin],
  components: { SearchBar },
  mounted() {
    this.fetchCompanyInfo()
    this.visible = true
    this.showSearch = true
  },
  data() {
    const vm = this
    return {
      date: [
        vm
          .moment()
          .add(-6, "days")
          .format(),
        vm.moment().format()
      ],
      columns: [
        {
          title: "分路名称",
          align: "center",
          key: "deviceName",
          // render(h, params) {
          //   const {
          //     row: { deviceNo, deviceName }
          //   } = params
          //   return h(
          //     "button",
          //     {
          //       class: {
          //         "link-button": true
          //       },
          //       style: {
          //         color: "#515a6e"
          //       },
          //       on: {
          //         click: () => {
          //           vm.$router.push(
          //             `/analysis/weekly/current/${deviceNo}/${deviceName}`
          //           )
          //         }
          //       }
          //     },
          //     deviceName
          //   )
          // }
        },
        {
          align: "center",
          renderHeader: h => {
            return h("span", `最高电流(A)${vm.searchData.date}`)
          },
          children: [
            {
              title: "A相",
              align: "center",
              key: "aMax"
            },
            {
              title: "B相",
              align: "center",
              key: "bMax"
            },
            {
              title: "C相",
              align: "center",
              key: "cMax"
            },
            {
              title: "零线",
              align: "center",
              key: "lMax"
            }
          ]
        },
        {
          align: "center",
          renderHeader: h => {
            return h("span", `最低电流(A)${vm.searchData.date}`)
          },
          children: [
            {
              title: "A相",
              align: "center",
              key: "aMin"
            },
            {
              title: "B相",
              align: "center",
              key: "bMin"
            },
            {
              title: "C相",
              align: "center",
              key: "cMin"
            },
            {
              title: "零线",
              align: "center",
              key: "lMin"
            }
          ]
        }
      ],
      tableData: [],
      visible: false,
      companyInfo: { name: "设备列表" },
      pageInfo: { total: 0, current: 1 },
      searchData: {},
      loading: false
    }
  },
  methods: {
    handleTimeChange(time) {
      const vm = this
      if (Array.isArray(vm.date)) {
        const value = vm.date
        if (isBlankArray(value)) {
          vm.date = [
            vm
              .moment()
              .add(-6, "days")
              .format(),
            vm.moment().format()
          ]
        }
        const timeStart = vm.moment(vm.date[0]),
          timeEnd = vm.moment(vm.date[1]),
          days = timeEnd.diff(timeStart, "days"),
          date = [...vm.date.map(t => vm.moment(t).format("YYYY-MM-DD"))].join(
            "~"
          ),
          _searchData = vm.searchData
        _searchData["date"] = date
        vm.searchData = _searchData
        if (days === 6) {
          vm.pageInfo.current = 1
          vm.initData()
        } else {
          vm.$Message.error("只能选择7天")
        }
      }
    },

    handleOnOpen() {
      this.visible = true
    },

    initData() {
      const vm = this
      vm.loading = true
      const data = { ...vm.searchData }
      const params = {
        companyId: vm.companyId,
        groupId: data.groupId,
        deviceNo: data.deviceNo,
        page: vm.pageInfo.current,
        flag: "A",
        date: data.date
      }
      getNxRealData(params).then(res => {
        const { code, data } = res
        if (code === 200) {
          this.tableData = data.list
          vm.pageInfo.total = data.total
        } else {
          vm.tableData = []
          vm.pageInfo.total = 0
        }
        vm.loading = false
      })
    },

    handleChange(value) {
      const vm = this
      if (Array.isArray(vm.date)) {
        const date = [
          ...vm.date.map(t => vm.moment(t).format("YYYY-MM-DD"))
        ].join("~")
        this.searchData = value
        this.searchData.date = date
        this.pageInfo.current = 1
        this.initData()
      }
    },

    handleDownload() {
      const vm = this
      if (Array.isArray(vm.date)) {
        const value = vm.date
        if (isBlankArray(value)) {
          vm.date = [
            vm
              .moment()
              .add(-6, "days")
              .format(),
            vm.moment().format()
          ]
        }

        const timeStart = vm.moment(vm.date[0]),
          timeEnd = vm.moment(vm.date[1]),
          days = timeEnd.diff(timeStart, "days"),
          date = [...vm.date.map(t => vm.moment(t).format("YYYY-MM-DD"))].join(
            "~"
          ),
          _searchData = vm.searchData
        _searchData["date"] = date
        vm.searchData = _searchData
        if (days === 6) {
          const searchData = utils.filterBlankValue(vm.searchData)
          const params = { ...searchData, flag: "A" }
          const url = exportNx(params)
          const download = new Download(url)
          vm.$Notice.open({
            title: "下载提示",
            desc: "文件正在下载，请至下载查看进度"
          })
          download.destory()
        } else {
          vm.$Message.error("只能选择7天")
        }
      }
    },

    handlePageChange(index) {
      this.pageInfo.current = index
      this.initData()
    },

    async fetchCompanyInfo() {
      const vm = this
      const companyId = vm.companyId
      const { data } = await getCompanyDetailByCompanyId(companyId)
      if (data) {
        this.companyInfo = data
      }
    }
  }
}
</script>
